import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { CSSTransitionGroup } from 'react-transition-group';
import WPT from 'wpt';
import TabNavBar from '../Tabs';
import TabPane from './pane';
import styles from './index.less';

class TabPages extends PureComponent {
    static defaultProps = {
        animate: true,
        tabClassName: '',
        paneClassName: '',
        defaultKey: '',
        onChange: null,
        sticky: false,
    };

    static propTypes = {
        animate: PropTypes.bool, // tabPane是否有动画
        tabClassName: PropTypes.string, // tab签头的样式
        paneClassName: PropTypes.string, // tab页面pane的公共样式
        defaultKey: PropTypes.string, // 默认选中的TabPane的key
        onChange: PropTypes.func, // tab 点击回调func(key)
        sticky: PropTypes.bool, // tab 是否置顶吸附
        children: PropTypes.arrayOf(TabPane.instance).isRequired, // 页面的具体内容，对象TabPane 成员
    };

    constructor(p) {
        super(p);
        const { children, defaultKey } = this.props;
        const tabPanes = {};
        let defaultTab;

        const TYPES = children.map((it, index) => {
            const { key } = it;
            const { name } = it.props;
            const tab = { name, key, index };

            if (key === defaultKey) {
                defaultTab = tab;
            }
            tabPanes[key] = it;
            return tab;
        });

        this.state = {
            currentTab: defaultTab || TYPES[0],
            TYPES,
            tabPanes,
            direct: 'none',
        };
    }

    handleClick = tab => {
        const { currentTab } = this.state;
        if (tab.index === currentTab.index) return;
        // 调用切换事件
        this.props.onChange && this.props.onChange(tab.key);

        // 动画切换方向
        const direct = tab.index > currentTab.index ? 'paneR' : 'paneL';
        this.setState({
            currentTab: tab,
            direct,
        });
    };

    render() {
        const {
            currentTab, TYPES, tabPanes, direct
        } = this.state;

        const {
            paneClassName, tabClassName, sticky, ...other
        } = this.props;
        return (
            <div className={styles.tabPage}>
                <TabNavBar
                    {...other}
                    items={TYPES}
                    sticky={sticky}
                    itemClassName={tabClassName}
                    onItemClick={this.handleClick}
                />

                {/* 仅ios做动画 */}
                <CSSTransitionGroup
                    transitionName={direct}
                    transitionEnter={!!WPT.os.ios}
                    transitionLeave={!!WPT.os.ios}
                    transitionEnterTimeout={300}
                    transitionLeaveTimeout={300}
                    className={cx(styles.trans, paneClassName)}
                    component="div"
                >
                    {tabPanes[currentTab.key]}
                </CSSTransitionGroup>
            </div>
        );
    }
}

TabPages.TabPane = TabPane;
export default TabPages;
